<template>
  <div>
    <slot v-if="isLoggedIn" />
    <div v-else class="login-check">
      <van-empty description="请先登录">
        <van-button type="primary" @click="showLoginModal = true">
          登录
        </van-button>
      </van-empty>
    </div>
    
    <LoginModal 
      :show="showLoginModal"
      @update:show="showLoginModal = $event"
      @success="handleLoginSuccess"
      @cancel="handleLoginCancel"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useAuthStore } from '@/stores/auth'
import LoginModal from './LoginModal.vue'

const authStore = useAuthStore()
const showLoginModal = ref(false)

const isLoggedIn = computed(() => authStore.isLoggedIn)

const handleLoginSuccess = () => {
  showLoginModal.value = false
}

const handleLoginCancel = () => {
  showLoginModal.value = false
}
</script>

<style scoped>
.login-check {
  padding: 60px 20px;
  text-align: center;
}
</style> 